<template>
  <!-- 编辑随访 -->
  <section>
    <div style="border-bottom:1px solid #eee;padding-bottom:10px;">
      <el-page-header @back="goBack" content="随访任务详细">
      </el-page-header>
    </div>
    <br>
    <div class="form-tool">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-position="top" @submit.native.prevent="onSubmit">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="患者：" prop="patientId">
                <patientSearch v-model="form.patientId" :disabled="!!form.id" :keyword="initData.keywordPat" @change="onChangePat" @clear="onClearPat"></patientSearch>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="证件号：">
                <el-input :disabled="true" :value="patientInfo.idCard"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="性别：">
                <el-radio-group :disabled="true" :value="patientInfo.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="年龄：">
                <el-input :disabled="true" :value="patientInfo.age"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：">
                <el-input :disabled="true" :value="patientInfo.birthday"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号：">
                <el-input :disabled="true" :value="patientInfo.mobile"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="民族：">
                <el-input :disabled="true" :value="patientInfo.nationId|changeAssist(nationEnum)"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="住址：">
                <el-input :disabled="true" :value="patientInfo|toAddress"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="patientInfo.age>18">
              <el-form-item label="职业：">
                <el-input :disabled="true" :value="patientInfo.occupationId|changeAssist(occupationEnum)"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="patientInfo.age>18">
              <el-form-item label="工作单位：">
                <el-input :disabled="true" :value="patientInfo.workUnit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="计划随访日期：" prop="scheduleVisitTime">
                <el-date-picker v-model="form.scheduleVisitTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="主治医生：" prop="managerDoctorId">
                <doctorSearch v-model="form.managerDoctorId" :keyword="initData.doctorName"></doctorSearch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计划随访人员：" prop="scheduleVisitUserId">
                <userSearch v-model="form.scheduleVisitUserId" :keyword="initData.planUser" placeholder=""></userSearch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="随访类型：" prop="visitTypeId">
            <template v-for="(item,index) in visitType">
              <el-tag :type="form.visitTypeId==item.id?'primary':'info'" :key="index" style="margin:0 10px 10px 0;cursor: pointer;" @click="onClickType(item)">{{item.name}}</el-tag>
            </template>
            <!-- 暂时不做 -->

            <!-- <div v-if="form.visitTypeId&&form.patientId">
              <template v-if="visitReriod.length>0">
                <el-alert v-for="(item,index) in visitReriod" type="warning" :closable="false" style="padding:0 16px;">
                  <template v-slot:title>
                    <span class="vertical-middle">
                      主管医生：{{item.doctorName}} &nbsp;&nbsp;
                      初次就诊时间：{{item.firstVisitTime|formatTime(false)}} &nbsp;&nbsp;
                      随访周期：{{item.startTime|formatTime(false)}}至{{item.endTime|formatTime(false)}}&nbsp;&nbsp;
                      初步诊断：{{item.firstVisitInfo|toResultStr}}
                    </span>
                    &nbsp;&nbsp;
                    <el-link class="vertical-middle" type="primary" @click="dialogReriod=true">去修改</el-link>
                  </template>
                </el-alert>
              </template>
              <el-alert v-else type="warning" :closable="false" style="padding:0 16px;">
                <template v-slot:title>
                  <span class="vertical-middle">你还未设置该类型的随访周期</span>
                  &nbsp;&nbsp;
                  <el-link class="vertical-middle" type="primary" @click="dialogReriod=true">去设置</el-link>
                </template>
              </el-alert>
            </div> -->
          </el-form-item>
          <el-form-item label="随访内容：" style="position: relative;" prop="visitContent">
            <el-input v-model="form.visitContent" type="textarea" :rows="3"></el-input>
            <div style="position: absolute;right:0;top:-47px;">
              <el-select v-model="visitContent.item" value-key="id" placeholder="选择随访内容模板" filterable remote clearable  :remote-method="getSearchNR" @change="onChangeNR" @clear="getSearchNR" style="width:300px;">
                <el-option v-for="(item,index) in visitContent.list" :key="index" :label="item.templateName" :value="item"></el-option>
                <br>
                <pager v-model="visitContent.pager" small @change-pagenum="followUpVisitContentTemplatepageQuery"></pager>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item v-if="form.status==4" label="取消原因：" prop="visitContent">
            <el-input v-model="form.visitContent" type="textarea" :rows="3"></el-input>
          </el-form-item>
          <el-form-item v-if="!form.status||form.status==1||form.status==2" label="">
            <el-button type="primary" :loading="btnLoading" style="width:100px;" native-type="submit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-left:20px">
        <div class="user-head">
          <img v-if="patientInfo.head" :src="patientInfo.head|imageUrl" style="width:230px;height:230px;">
          <img v-else src="@/img/unknown-avatar.png" alt="" style="width:230px;height:230px;">
        </div>
        <div style="margin-top:10px;">
          <el-button :disabled="!qxBtns.bl" style="width:100%" @click="openBL">查看病例</el-button>
        </div>
      </div>
    </div>
    <dialogHistoryCase v-model="dialogHistoryCase"  :patientInfo="patientInfo"></dialogHistoryCase>
    <!-- <editVisitPeriod v-model="dialogReriod" @success="getReriod" :patientId="form.patientId" :visitTypeId="form.visitTypeId" :visitReriod="visitReriod"></editVisitPeriod> -->
  </section>
</template>
<script>
export default {
  components: {
    doctorSearch: () => import("@/pages/_com/doctorSearch.vue"),
    userSearch: () => import("@/pages/_com/userSearch.vue"),
    patientSearch: () => import("@/pages/_com/patientSearch.vue"),
    // editVisitPeriod: () => import("./_com/editVisitPeriod.vue"),
    dialogHistoryCase: () =>
      import("@/pages/process/_com/dialogHistoryCase.vue")
  },
  filters: {
    toAddress(obj) {
      let str = "";
      if (obj.province) str += obj.province;
      if (obj.city) str += obj.city;
      if (obj.district) str += obj.district;
      if (obj.address) str += obj.address;
      return str;
    },
    toResultStr(obj) {
      let str = "";
      if (!obj) return str;
      for (let key in obj) {
        if (str) {
          str += "," + obj[key];
        } else {
          str = obj[key];
        }
      }
      return str;
    }
  },
  data() {
    return {
      //   dialogReriod: false,
      dialogHistoryCase: false,
      qxBtns: {},
      btnLoading: false,
      //用户加载用户
      initData: {
        keywordPat: "",
        doctorName: "",
        planUser: ""
      },
      //内容模板
      visitContent: {
        name: "",
        item: null,
        pager: { pageSize: 10, pageNum: 1, total: 0 },
        list: []
      },
      form: {
        managerDoctorId: "",
        patientId: "",
        scheduleVisitTime: "",
        scheduleVisitUserId: "",
        visitTypeId: "",
        visitContent: "",
        id: "",
        cancelReason: "",
        status: ""
      },
      rules: {
        patientId: [{ required: true, message: "此项必填", trigger: "change" }],
        scheduleVisitTime: [
          { required: true, message: "此项必填", trigger: "change" }
        ],
        managerDoctorId: [
          { required: true, message: "此项必填", trigger: "change" }
        ],
        scheduleVisitUserId: [
          { required: true, message: "此项必填", trigger: "change" }
        ],
        visitTypeId: [
          { required: true, message: "此项必填", trigger: "change" }
        ],
        visitContent: [{ required: true, message: "此项必填", trigger: "blur" }]
      },
      visitType: [], //随访类型
      visitReriod: [], //随访周期
      occupationEnum: [], //职业
      nationEnum: [], //民族
      patientInfo: {} //患者信息
    };
  },
  created() {
    const th = this;
    let id = th.$route.query.id;
    th.initData.keywordPat = th.$route.query.patientName;
    th.initData.doctorName = th.$route.query.docName;
    th.initData.planUser = th.$route.query.planUser;
    th.form.status = th.$route.query.status;
    const fn = async function() {
      th.getQX();
      th.nationEnum = await th.getCommonConfigByKey("民族");
      th.occupationEnum = await th.getCommonConfigByKey("职业");
      if (id) {
        th.form.id = th.jieMi(id);
        //已取消
        if (th.form.status == 4) {
          th.onDetail4();
        } else {
          th.onDetail();
        }
      }
      th.followUpVisitContentTemplatepageQuery();
      th.followUpVisitTypepageQuery();
    };
    th.verifyUrlAttack().then(res => {
      fn();
    });
  },
  mounted() {},
  methods: {
    //提交
    onSubmit() {
      const th = this;
      let j = {};
      const add = () => {
        th.btnLoading = true;
        j.id = "";
        th.$api
          .addfollowUpVisit(j)
          .then(res => {
            if (res.executed) {
              th.$message.success("保存成功");
              th.$router.push({
                path: "visit"
              });
            } else {
              th.$message.error(res.message);
            }
            th.btnLoading = false;
          })
          .catch(res => {
            th.btnLoading = false;
          });
      };
      const update = () => {
        th.btnLoading = true;
        th.$api
          .updatefollowUpVisit(j)
          .then(res => {
            if (res.executed) {
              th.$message.success("保存成功");
              th.$router.push({
                path: "visit"
              });
            } else {
              th.$message.error(res.message);
            }
            th.btnLoading = false;
          })
          .catch(res => {
            th.btnLoading = false;
          });
      };
      th.$refs["form"].validate(v => {
        if (v) {
          Object.assign(j, th.form);
          if (th.form.id) {
            update();
          } else {
            add();
          }
        }
      });
    },
    //取消详情
    onDetail4() {
      const th = this;
      let j = {
        id: th.form.id
      };
      th.$api.cancelvisitContentdetail(j).then(res => {
        if (res.executed) {
          let d = res.data;
          let json = {
            managerDoctorId: d.managerDoctorId,
            patientId: d.patientId,
            scheduleVisitTime: d.scheduleVisitTime,
            scheduleVisitUserId: d.scheduleVisitUserId,
            visitTypeId: d.visitTypeId,
            visitContent: d.visitContent,
            cancelReason: d.cancelReason
          };
          th.$utils.joinFormJson(th.form, json);
          th.onChangePat();
        }
      });
    },
    //获取详情
    onDetail() {
      const th = this;
      let j = {
        id: th.form.id
      };
      th.$api.followUpVisitcontentid(j).then(res => {
        if (res.executed) {
          let d = res.data;
          let json = {
            managerDoctorId: d.managerDoctorId,
            patientId: d.patientId,
            scheduleVisitTime: d.scheduleVisitTime,
            scheduleVisitUserId: d.scheduleVisitUserId,
            visitTypeId: d.visitTypeId,
            visitContent: d.visitContent
          };
          th.$utils.joinFormJson(th.form, json);
          th.onChangePat();
        }
      });
    },
    //获取周期
    // getReriod() {
    //   const th = this;
    //   if (!th.form.patientId || !th.form.visitTypeId) {
    //     return;
    //   }
    //   let j = {
    //     patientId: th.form.patientId,
    //     visitTypeId: th.form.visitTypeId
    //   };
    //   th.$api.getfollowUpVisitPeriod(j).then(res => {
    //     if (res.executed) {
    //       th.visitReriod = res.data;
    //     }
    //   });
    // },
    //选择随访类型
    onClickType(obj) {
      const th = this;
      th.form.visitTypeId = obj.id;
      th.$refs["form"].validateField("visitTypeId");
    },
    //选择随访内容
    onChangeNR() {
      const th = this;
      th.form.visitContent = th.visitContent.item.content;
      th.$refs["form"].validateField("visitContent");
    },
    //搜索随访内容
    getSearchNR(name) {
      const th = this;
      th.visitContent.name = name;
      th.visitContent.pager.pageNum = 1;
      th.followUpVisitContentTemplatepageQuery();
    },
    //查询患者详情
    onChangePat() {
      const th = this;
      let j = {
        hpId: th.adminUser.hpId,
        patientId: th.form.patientId
      };
      th.$api.getThePatientLibraryById(j).then(res => {
        if (res.executed) {
          th.patientInfo = res.thePatientLibraryDetail;
        }
      });
    },
    //get随访模板
    followUpVisitContentTemplatepageQuery() {
      const th = this;
      let j = {
        templateName: th.visitContent.name
      };
      Object.assign(j, th.visitContent.pager);
      th.$api.followUpVisitContentTemplatepageQuery(j).then(res => {
        if (res.executed) {
          th.visitContent.list = res.dataBody.list;
          th.visitContent.pager.total = res.dataBody.total;
        }
      });
    },
    //获取随访类型
    followUpVisitTypepageQuery() {
      const th = this;
      let j = {
        pageNum: 1,
        pageSize: 500
      };
      th.$api.followUpVisitTypepageQuery(j).then(res => {
        if (res.executed) {
          th.visitType = res.dataBody.list;
        }
      });
    },
    //删除患者
    onClearPat() {
      const th = this;
      th.patientInfo = {};
    },
    //打开病例
    openBL() {
      const th = this;
      if (!th.form.patientId) {
        th.$message.warning("请选择患者");
        return;
      }
      th.dialogHistoryCase = true;
    },
    goBack() {
      this.$router.go(-1); 
    }
  },
  watch: {
    // "form.patientId"() {
    //   const th = this;
    //   th.getReriod();
    // },
    // "form.visitTypeId"() {
    //   const th = this;
    //   th.getReriod();
    // }
  }
};
</script>